<div class="layui-card">
    <div class="layui-card-header">检索条件</div>
    <div class="layui-card-body">
        <form id="role-query-form" class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">部门名称</label>
                    <div class="layui-input-inline">
                        <input name="deptName" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <button class="layui-btn" lay-filter="dept-query-submit" lay-submit><i class="layui-icon">&#xe615;</i> 检索</button>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
   	<div class="layui-card-header">
        <h2 class="header-title">部门列表</h2>
        <div class="layui-btn-group" style="float: right">
            <button class="layui-btn layui-btn-sm" id="btnAddDept"><i class="layui-icon">&#xe654;</i> 增加</button>
        </div>
    </div>
    <div class="layui-card-body">
        <table class="layui-hidden" id="dept-table" lay-filter="dept-table"></table>
    </div>
</div>

<!-- 是否启用列 -->
<script type="text/html" id="isEnableTpl">
    {{#  if(d.isEnable === '0'){ }}
        <span class="layui-badge layui-bg-gray">{{ d.isEnableText }}</span>
    {{#  } else if(d.isEnable === '1'){ }}
        <span class="layui-badge-rim">{{ d.isEnableText }}</span>
    {{#  } }}
</script>

<!-- 表格操作列 -->
<script type="text/html" id="dept-table-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script>
    layui.use(['jquery', 'table', 'treeGrid', 'form', 'util', 'sadmin'], function () {
        var $ = layui.$;
        var table = layui.table;
        var treeGrid = layui.treeGrid;
        var form = layui.form;
        var util = layui.util;
        var sadmin = layui.sadmin;

		// 渲染用户表格
		treeGrid.render({
            id: 'dept-table'
            ,elem: '#dept-table'
            ,url: '/system/dept/list'
            ,cellMinWidth: 100
            ,idField: 'pid'//必須字段
            ,treeId: 'pid'//树形id字段名称
            ,treeUpId: 'parentId'//树形父id字段名称
            ,treeShowName: 'deptName'//以树形式显示的字段
            ,height:'100%'
            ,isFilter: false
            ,iconOpen: true//是否显示图标【默认显示】
            ,isOpenDefault: true//节点默认是展开还是折叠【默认展开】
            ,loading: true
            ,method: 'post'
            ,isPage: false
            ,cols: [
            	[
	                {type:'checkbox',sort:true},
	            	{type: 'numbers', title: '序号'},
	                {field: 'deptName', width: 250, title: '部门名称'},
	                {field: 'sortOrder', width: 200, title: '排序'},
                    {field: 'isEnableText', width: 100, align: 'center', title: '是否启用', templet: '#isEnableTpl'},
                    {
                        align: 'center', templet: function (d) {
                            return util.toDateString(d.createTime.time);
                        }, title: '创建时间'
                    },
                    {align: 'center', width: 180, toolbar: '#dept-table-bar', fixed: 'right', title: '操作'}
            	]
            ]
            ,parseData:function (res) {//数据加载后回调
                return res;
            }
            ,onClickRow:function (index, o) {
                console.log(index,o,"单击！");
            }
            ,onDblClickRow:function (index, o) {
                console.log(index,o,"双击");
            }
        });
		
     	// 搜索提交事件
        form.on('submit(dept-query-submit)', function (data) {
        	treeGrid.query('dept-table', {
                where: data.field
            });
            return false;
        });
     	
     	// 添加按钮点击事件
        $('#btnAddDept').click(function () {
            showEditModel();
        });
     	
     	// 工具条点击事件
        treeGrid.on('tool(dept-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            }
            else if (layEvent === 'del') { //授权角色
            	delDept(data);
            }
        });
     	
     	// 显示表单弹窗
        var showEditModel = function (data) {
     		console.log(data);
            var title = data ? '修改部门' : '添加部门';
            sadmin.putTempData('system_dept', data);
            sadmin.popupCenter({
                title: title,
                path: '/system/dept/form',
      		  	zIndex: layer.zIndex,
                finish: function () {
                	treeGrid.query('dept-table', {});
                }
            });
        };
        
     	// 删除按钮点击事件
        var delDept = function (data) {
	    	layer.confirm('确定删除所选部门吗？', function (i) {
				layer.close(i);
	            layer.load(2);
	            $.post('system/dept/drop', {
	            	dataPid: data.pid
	            }, function (result) {
	            	layer.closeAll('loading');
	                layer.msg(result.msg);
	                treeGrid.query('dept-table', {});
            	});
            });
    	};
	});

</script>